import React from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

const Index = ()=>(<div>Index</div>)
const About = ()=>(<div>About</div>)

const lists = ['A', 'B', 'C', 'D', 'E'];

const List = ()=> {
    var ls = lists.map(function (e, index) {
        return (<li key={`${index}item`}>{e}</li>);
    });
    return <ul>{ls}</ul>;
};

const Contents = [
    {path: "/", component: Index, name: 'Index', exact: true},
    {path: "/list", component: List, name: 'List'},
    {path: "/about", component: About, name: 'About'}
];

const Indexes = Contents.map(function (ct) {
    return <li key={ct.name}>
        <Link to={ct.path}>{ct.name}</Link>
    </li>
});

const Details = Contents.map(function (ct) {
    return <Route key={`${ct.name}d`} path={ct.path} exact={ct.exact} component={ct.component}></Route>
});

const Style = {};

Style.left = {
    float: 'left',
    width: '24%',
    background: '#e4e4e4'
}

Style.right = {
    float: 'right',
    width: '75%',
    textAlign: 'center',
    background: '#fff'
};

const App = ()=> {
    return <Router basename="/abc">
        <div>
            <div style={Style.left}>
                {Indexes}
            </div>
            <div style={Style.right}>
                {Details}
            </div>
        </div>
    </Router>
}

export default App;

